<!-- 分页列表的table，结合了框架的分页列表的数据结构的 -->
<template>
    <el-row v-if="allowSearch">
        <el-col :span="24" style="text-align: left;">
            <!-- 搜索表单条件 -->
            <el-form v-model="formData" :inline="searchForm.inline === undefined ? true : searchForm.inline"
                @submit.prevent="searchFormSubmit">
                <el-input type="hidden" name="page" value="1"></el-input>

                <el-form-item v-for="item in searchForm.formItems">
                    <el-input v-if="item.type == 'text'" v-model="formData[item.name]" :placeholder="item?.placeholder"
                        clearable></el-input>

                    <el-select v-else-if="item.type == 'select'" v-model="formData[item.name]"
                        :placeholder="item?.placeholder">
                        <el-option v-for="opt in item.options" v-bind="opt"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <ElButton native-type="submit">
                        {{ searchForm.submitButtonText ? searchForm.submitButtonText : '搜索' }}
                    </ElButton>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>


    <el-row>
        <el-col style="text-align: left;padding-bottom: 10px;">
            <el-button type="danger" size="small" v-if="btns.deleteAll" @click="deleteAllBtnClick">{{ btns.deleteAll.text ?
                btns.deleteAll.text : '删除' }}</el-button>

            <el-button type="primary" size="small" v-if="btns.add"
                @click="'function' === typeof btns.add.click ? btns.add.click() : null">{{ btns.add.text ? btns.add.text :
                    '新增' }}</el-button>


            <!-- 自定义的按钮 -->
            <template v-if="btns.tableHeaderBtns">

                <el-button v-for="btnItem in btns.tableHeaderBtns" :type="btnItem.type ? btnItem.type : 'info'"
                    size="small" @click="'function' === typeof btnItem.click ? btnItem.click() : null">{{ btnItem.text ?
                        btnItem.text : '按钮' }}</el-button>
            </template>

        </el-col>
    </el-row>

    <ElRow>
        <ElCol :span="24">
            <ElTable border :data="tableData.data" @selection-change="selectRowsChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column v-for="item in headers" v-bind="item">
                    <template v-if="'function' === typeof item.template" #default="{ row }">
                        <div v-html="item.template(row)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template #default="scope">
                        <el-button v-for="btn in btns.rowBtns" size="small"
                            @click="btn.click(scope.row, scope.$index)">{{ btn.text }}</el-button>
                        <!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->

                    </template>
                </el-table-column>
            </ElTable>
        </ElCol>
    </ElRow>

    <el-row style="margin-top: 10px;">
        <!-- 分页组件 -->
        <el-col :span="16" :offset="8">
            <el-pagination small style="text-align: right;" background :total="tableData.total" @size-change="psChange">
            </el-pagination>
        </el-col>
    </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElButton } from 'element-plus';
import arr from '@/utils/arr'
import msgUtil from '@/utils/msgUtil'

// const prop = defineProps(['headers','allowSearch','searchForm'])
const prop = defineProps({
    headers: Array,
    allowSearch: Boolean,
    searchForm: Object,
    // modelValue: [String, Number],
    loadCallable: Function, // 请求数据的Promise
    btns: Object, // 主要按钮
})
// defineEmits(['update:modelValue'])
const formData = ref({
    page: 1,
    ps: 10
});

// table的数据
const tableData = ref({
    data: [],
    // ...
    total: 0
});
// 选中的table数据
const selectedIds = ref([]);

onMounted(() => {
    // 主动触发加载
    initPageData();
})

// 重新回到page=1
// ? 是否重置其它参数
function initPageData() {
    formData.value.page = 1;
    loadPageData();
}
// 加载列表数据
function loadPageData() {
    prop.loadCallable(formData.value).then(res => {

        msgUtil.alertIfError(res).then(() => {
            tableData.value = res.data;
            formData.value.page = res.data.current_page + 1;
        })

    })
}
// 点击搜索按钮,只重置page
function searchFormSubmit(e) {
    // 点击搜索按钮，重置page=1
    formData.value.page = 1;
    loadPageData();
}
// 改变页码数
function psChange(e) {
    console.log('psChange');
    console.log(e)
}
// 选中的行数据
function selectRowsChange(rows) {
    let ids = arr.pluck(rows, 'id');
    selectedIds.value = ids
}
// 点击删除所有
function deleteAllBtnClick() {
    if (selectedIds.value.length === 0) {
        ElMessage({
            type: 'info',
            message: '请先选择',
        });
        return;
    }
    if ('function' === typeof prop.btns.deleteAll.click) {
        prop.btns.deleteAll.click(selectedIds.value);
    }
}

defineExpose({
    initPageData
})
</script>